<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { eventApi, eventnodeuserApi } from '@/service/api.ts';
import { isJSON } from '@/utils/utils.ts';
import { useConstValue, useLocalValue, useIuserInfoStore } from '@/store/users.ts';
import dayjs from 'dayjs';
import SheetSvg from '~icons/svg/sheet';
import PraiseSvg from '~icons/svg/praise';

const router = useRouter();
const constValue = useConstValue();
const localValue = useLocalValue();
const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;

const tabRt = reactive({
  tabs: [ '会议', '投票', '征询', '公示' ],
  tab: '会议',
});

onMounted(() => {
  init();
});

const labelMap = {
  '会议': 'PropertyMeet',
  '投票': 'PropertyVote',
  '征询': 'PropertyAdvice',
  '公示': 'PropertyAnnounce',
};
const identities = ['业主','业主代表','业委会成员','业委会主任'];
const list = ref([]);
const init = async () => {
  const type = labelMap[tabRt.tab];
  if (!type) {
    return;
  }
  list.value = [];
  const events = await getEventIngList(type);
  for(let i = 0; i <= events.length - 1; i++) {
    const event = events[i];
    if (!isJSON(event.form_data)) {
      continue;
    }
    const arrs = JSON.parse(event.form_data);
    const signs = arrs.filter(item => item.sign);
    if (!signs.length) {
      continue;
    }
    event._sign = {};
    signs.forEach(item => {
      event._sign[item.sign] = item.value;
    });
    event._form_data = arrs.filter(i => !i.sign);
    
    // const nodeusers = await getEventnodeuserList(event);
    // if (nodeusers?.length) {
    //   event._vote = nodeusers[0].mark;
    // }
    
    const dex1 = identities.indexOf(localValue.mainUser.user_identity);
    const dex2 = identities.indexOf(event._sign?.identity);
    if (dex1 >= dex2) {
      list.value.push(event);
    }
  }
}
const getEventIngList = (type) => {
  return new Promise((resolve, reject) => {
    eventApi({
      method: 'get',
      params: {
        project: constValue.projectID,
        flow: constValue.flowID,
        node__before_node__form__type: type,
      }
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      reject([]);
    })
  })
}
// const getEventnodeuserList = (event) => {
//   return new Promise((resolve, reject) => {
//     eventnodeuserApi({
//       method: 'get',
//       params: {
//         project: constValue.projectID,
//         event: event.id,
//         node: event.node,
//       }
//     }).then(res => {
//       resolve(res?.results || []);
//     }).catch(err => {
//       reject([]);
//     })
//   })
// }

const handleEnter = (event) => {
  router.push({ path: '/businessCommittee/busComtUser', query: { eventID: event.id, tab: tabRt.tab }});
}
</script>

<template>
  <div class="content flex-column">
    <div class="tabs flex-sb">
      <div
        v-for="item in tabRt.tabs"
        :class="{ 'isActive': item === tabRt.tab }"
        @click="tabRt.tab = item; init()"
      >
        <span>{{ item }}</span>
      </div>
    </div>
    
    <div class="list-box scroller-aside">
      <div class="card flex-column" v-for="event in list" @click="handleEnter(event)">
        <div class="card-title flex--center">
          <SheetSvg color="#00B578"/>
          <div class="ellipsis" style="margin: 0 10px;flex: 1;">{{ event._sign?.name }}</div>
          <!-- <div
            class="text flex-nowrap flex--center"
            :class="{ 'neg': event._vote === '反对'}"
            v-if="event._vote"
          >
            <PraiseSvg />
            <span>已{{ event._vote }}</span>
          </div> -->
        </div>
        <div class="time-row flex">
          <label class="form-item">截止时间</label>
          <div class="row-value flex-column" v-if="event._sign">
            {{ dayjs(event._sign.endtime).format('YYYY-MM-DD HH:mm') }}
          </div>
        </div>
        <div class="others-box flex-column">
          <template v-for="item in event._form_data">
            <div class="other-item flex">
              <label class="form-item">{{ item.label }}</label>
              <div class="row-value">{{ item.value }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #F3F3F3;
}
.tabs {
  background-color: #fff;
  padding: 0 24px;
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  height: 42px;
  padding-top: 4px;
  line-height: 42px;
  .isActive {
    color: #009245;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 70%;
      height: 4px;
      background-color: #009245;
      transform: translateX(-50%);
    }
  }
}
.list-box {
  flex: 1;
  overflow: auto;
  padding: 12px;
}
.card {
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.card-title {
  height: 46px;
  background: linear-gradient( 90deg, #EDFFF5 0%, #FAFFF9 100%);
  padding: 0 12px;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  span {
    margin-left: 5px;
  }
  // .text {
  //   color: #00B578;
  //   font-size: 14px;
  //   svg {
  //     width: 16px;
  //     height: 16px;
  //     margin-right: 4px;
  //   }
  //   &.neg {
  //     color: #FF0000;
  //     svg {
  //       transform-origin: center;
  //       transform: rotate(180deg);
  //     }
  //   }
  // }
}
.time-row {
  padding: 12px 12px 6px;
}
label.form-item {
  width: 60px;
  min-width: 60px;
  white-space: nowrap;
  margin-left: 4px;
  font-size: 14px;
  color: #666666;
  margin-right: 12px;
}
.row-value {
  font-size: 14px;
  color: #111111;
  display: -webkit-box;        /* 启用 WebKit 的弹性布局 */
  -webkit-line-clamp: 3;       /* 限制内容显示三行 */
  -webkit-box-orient: vertical;/* 垂直布局 */
  overflow: hidden;            /* 隐藏超出部分 */
  text-overflow: ellipsis;     /* 显示省略号 */
  word-break: break-word;      /* 防止长单词溢出 */
}
.others-box {
  padding: 0 12px 6px;
  .other-item {
    margin: 6px 0;
  }
}
</style>